<template>
  <div>

    <div class="absolute top-2 left-2 text-xs	font-size: 0.55rem;">本周车辆使用情况</div>
    <div style="margin-top: 10px;"></div>
    <div ref="chart1" style="width: 100%; height: 250px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart1 = ref();

onMounted(() => {

  var myChart = echarts.init(chart1.value);

  var // var imgPath = ['http://bmob-cdn-15355.b0.upaiyun.com/2017/12/01/bee4341c4089af7980b87074a77479ad.png']
    option = {
      // backgroundColor: "#101736",
      color: ["#0033cc", "#00cc99"],
      legend: {
        show: true,
        // icon: 'circle',//图例形状
        bottom: 45,
        center: 0,
        itemWidth: 12, // 图例标记的图形宽度。[ default: 25 ]
        itemHeight: 6, // 图例标记的图形高度。[ default: 14 ]
        itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        top: 5,
        textStyle: {
          fontSize: 8,
          color: "#ade3ff",
        },
        data: ["空闲", "使用"],
      },
      radar: [
        {
          indicator: [
            {
              text: "星期一",
              max: 100,
            },
            {
              text: "星期二",
              max: 100,
            },
            {
              text: "星期三",
              max: 100,
            },
            {
              text: "星期四",
              max: 100,
            },
            {
              text: "星期五",
              max: 100,
            },
          ],
          textStyle: {
            color: "red",

          },
          center: ["50%", "38%"],
          radius: 70,
          startAngle: 90,
          splitNumber: 5,

          orient: "horizontal", // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
          // shape: 'circle',
          // backgroundColor: {
          //     image:imgPath[0]
          // },
          name: {
            formatter: "{value}",
            textStyle: {
              fontSize: 9, //外圈标签字体大小
              color: "#ffffff", //外圈标签字体颜色

            },

          },
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ["#15344c", "#164b56"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },

          // axisLabel:{//展示刻度
          //     show: true
          // },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: "#153269",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#113865", // 分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
        },
      ],

      series: [
        {
          name: "雷达图",
          type: "radar",
          itemStyle: {
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },
          },
          data: [
            {
              name: "空闲",
              value: [80, 78, 68, 70, 85],
              areaStyle: {
                normal: {
                  // 单项区域填充样式
                  color: {
                    type: "linear",
                    x: 0, //右
                    y: 0, //下
                    x2: 1, //左
                    y2: 1, //上
                    colorStops: [
                      {
                        offset: 0,
                        color: "#0033cc",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(0,0,0,0)",
                      },
                      {
                        offset: 1,
                        color: "#0033cc",
                      },
                    ],
                    globalCoord: false,
                  },
                  opacity: 1, // 区域透明度
                },
              },
              symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
              label: {
                // 单个拐点文本的样式设置
                normal: {
                  show: true, // 单个拐点文本的样式设置。[ default: false ]
                  position: "top", // 标签的位置。[ default: top ]
                  distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                  color: "#3366ff", // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                  fontSize: 9, // 文字的字体大小
                  formatter: function (params) {
                    return params.value;
                  },
                },
              },
              itemStyle: {
                normal: {
                  //图形悬浮效果
                  borderColor: "#0033cc",
                  borderWidth: 2.5,
                },
              },
              // lineStyle: {
              //     normal: {
              //         opacity: 0.5// 图形透明度
              //     }
              // }
            },
            {
              name: "使用",
              value: [40, 42, 55, 50, 35],
              symbolSize: 2.5,
              itemStyle: {
                normal: {
                  borderColor: "#00cc99",
                  borderWidth: 2.5,
                },
              },
              areaStyle: {
                normal: {
                  // 单项区域填充样式
                  color: {
                    type: "linear",
                    x: 0, //右
                    y: 0, //下
                    x2: 1, //左
                    y2: 1, //上
                    colorStops: [
                      {
                        offset: 0,
                        color: "#00cc99",
                      },
                      {
                        offset: 0.6,
                        color: "rgba(0,0,0,0)",
                      },
                      {
                        offset: 1,
                        color: "#00cc99",
                      },
                    ],
                    globalCoord: false,
                  },
                  opacity: 1, // 区域透明度
                },
              },
              label: {
                // 单个拐点文本的样式设置
                normal: {
                  show: true, // 单个拐点文本的样式设置。[ default: false ]
                  position: "top", // 标签的位置。[ default: top ]
                  distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                  color: "#33ffff", // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                  fontSize: 9, // 文字的字体大小
                  formatter: function (params) {
                    return params.value;
                  },
                },
              },
              // lineStyle: {
              //     normal: {
              //         opacity: 0.5// 图形透明度
              //     }
              // }
            },

          ],
        },
      ],

    };

  myChart.setOption(option);
})
</script>



<style lang="scss" scoped></style>